<template>
    <view class="page">
        <u-sticky>
            <u-tabs-swiper ref="uTabs" :list="tablist" :current="current" @change="tabsChange" :is-scroll="false"
                swiperWidth="750"></u-tabs-swiper>
        </u-sticky>
        <view class="contion_box" v-for="(item, index) in winningJionList" :key="index">
            <view class="left_box">
                <image :src="item.room.avatar" mode="scaleToFill" />
            </view>
            <view class="mid_box">
                <view class="Daily_box">
                    <view class="Daily_text_box">{{ item.room.room_name }}</view>
                    <view class="official_box" v-if="item.room.is_official == 1">官方</view>
                </view>
                <view class="house_flame_box">
                    <view class="flame_box" v-if="current == 0 || current == 1">
                        <view class="house_flame_image_box">
                            <image
                                src="https://new.qingfentool.vip/upload/image/20230814/89e69cb86a65c071a6fce6c7b4ba8a07.png"
                                mode="scaleToFill" />
                        </view>
                        <view class="house_flame_text_box">{{ item.room.popularity }}</view>
                    </view>
                    <view class="sm_box">

                        <view class="box_image_box">
                            <image
                                src="https://new.qingfentool.vip/upload/image/20230814/ee568fef6547453e6924002cfd8845da.png"
                                mode="scaleToFill" />
                        </view>
                        <view class="box_text_box">{{ item.room.num }}</view>
                    </view>
                </view>
            </view>
            <view class="right_box" :style="{ justifyContent: current == 0 ? 'flex-end' : 'space-between' }">
                <view class="ticket_box" v-if="current == 0" @click="win">中奖</view>
                <view class="award_box" v-else v-for="(items, indexs) in item.users" :key="indexs">
                    <image :src="items.avatar" mode="scaleToFill" />
                </view>
            </view>
        </view>
        <view class="bot_text">无更多记录</view>
        <uni-popup mode="center" ref="kaijiangTc" border-radius="20" :mask-click=false>
            <view class="bg_box">
                <view class="bg_pic_box">
                    <view class="prize_pic_box"></view>
                    <view class="prize_Winning_box">中奖物品</view>
                    <view class="prize_name_box">华为P50一部</view>
                </view>
                <view class="andknow_box" @click="andknow">我知道了</view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            tablist: [{
                name: '中奖记录'
            }, {
                name: '参与记录'
            }],
            current: 0, // tabs组件的current值，表示当前活动的tab选项
            winningJionList: [],//中奖参与list
            flag: true,//防抖
            page: 1,//分页
        };
    },
    onShow() {
        this.init()
    },
    onReachBottom() {
        if (this.flag) {
            this.init()
        } else {
            this.flag = false
        }
    },
    methods: {
        // tabs通知swiper切换
        tabsChange(index) {
            this.current = index
            this.page = 1
            this.winningJionList = []
            this.init()

        },
        //中奖
        win() {
            this.$refs.kaijiangTc.open()
        },
        init() {
            if (this.current == 0) {
                this.$Request.get(this.$api.house.welfareWinningLog).then(res => {
                    uni.hideLoading()
                    var winningJionList = res.data.list
                    this.page++
                    this.winningJionList = this.winningJionList.concat(winningJionList);// 拼接回来的数据
                    // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                    if (winningJionList.length < 20) {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
                })
            } else {
                this.$Request.get(this.$api.house.welfareJoinLog).then(res => {
                    var winningJionList = res.data.list
                    this.page++
                    this.winningJionList = this.winningJionList.concat(winningJionList);// 拼接回来的数据
                    // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                    if (winningJionList.length < 20) {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
                })

            }

        },
        andknow() {
            this.$refs.kaijiangTc.close()
        }

    }
};
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 20rpx;

    /deep/.u-tabs {
        background: #262626 !important;
        color: #F8B857 !important;
        margin-bottom: 45rpx !important;
    }

    /deep/.u-tabs-item {
        color: #F8B857 !important;
        font-size: 30rpx !important;
    }

    /deep/.u-scroll-bar {
        background-color: #F8B857 !important;
    }

    .contion_box {
        width: 693rpx;
        height: 123rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        margin-bottom: 15rpx;
        padding: 0 22rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
            width: 75rpx;
            height: 75rpx;
            border-radius: 329rpx 329rpx 329rpx 329rpx;
            opacity: 1;
            background-color: #fff;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .mid_box {
            width: 267rpx;
            height: 100%;

            .Daily_box {
                width: 100%;
                height: 37rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 22rpx;
                margin-bottom: 12rpx;

                .Daily_text_box {
                    height: 37rpx;
                    font-size: 28rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #FCFCFC;
                    line-height: 36rpx;
                    margin-right: 6rpx;
                }

                .official_box {
                    width: 45rpx;
                    height: 28rpx;
                    border-radius: 6rpx 6rpx 6rpx 6rpx;
                    border: 1rpx solid #F8B857;
                    line-height: 26rpx;
                    font-size: 16rpx;
                    font-family: Microsoft YaHei-Light, Microsoft YaHei;
                    font-weight: 300;
                    color: #F8B857;
                    text-align: center;
                }
            }

            .house_flame_box {
                width: 100%;
                height: 36rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 18rpx;

                .flame_box {
                    height: 100%;
                    margin-right: 18rpx;
                    display: flex;
                    justify-content: flex-end;

                    .house_flame_image_box {
                        width: 32rpx;
                        height: 32rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .house_flame_text_box {
                        height: 29rpx;
                        font-size: 22rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #A4A4A4;
                        line-height: 36rpx;
                        margin-left: 7rpx;
                    }
                }

                .sm_box {
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;

                    .box_image_box {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 7rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .box_text_box {
                        height: 29rpx;
                        font-size: 22rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #A4A4A4;
                        line-height: 36rpx;
                    }
                }
            }
        }

        .right_box {
            width: 280rpx;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            // overflow: auto;

            .ticket_box {
                width: 75rpx;
                height: 75rpx;
                background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
                border: 1rpx solid #D8D6AF;
                font-size: 26rpx;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #393834;
                line-height: 75rpx;
                text-align: center;
                border-radius: 50%;
            }

            .award_box {
                width: 75rpx;
                height: 75rpx;
                opacity: 1;
                border: 1rpx solid #D8D6AF;
                border-radius: 50%;
                flex-shrink: 0;
                margin-right: 24rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }

    }

    .bot_text {
        width: 180rpx;
        height: 29rpx;
        font-size: 22rpx;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #A4A4A4;
        line-height: 0rpx;
        text-align: center;
        margin: auto;
        margin-top: 34rpx;
    }

    /deep/.u-mode-center-box {
        background: none !important;
    }

    .bg_box {
        width: 392rpx;
        height: 770rpx;

        .bg_pic_box {
            width: 391rpx;
            height: 623rpx;
            background-image: url('https://new.qingfentool.vip/upload/image/20230818/a5bfa4f8974c973d76a6f9607d23a981.png');
            background-size: 100% 100%;
            margin-bottom: 62rpx;
            padding: 50rpx 0;

            .prize_pic_box {
                width: 248rpx;
                height: 394rpx;
                background: #FFFFFF;
                margin: auto;
                margin-bottom: 26rpx;
            }

            .prize_Winning_box {
                width: 200rpx;
                height: 31rpx;
                font-size: 24rpx;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #393834;
                line-height: 31rpx;
                text-align: center;
                margin: auto;
                margin-bottom: 17rpx;
            }

            .prize_name_box {
                width: 80%;
                height: 40rpx;
                font-size: 30rpx;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #393834;
                line-height: 40rpx;
                text-align: center;
                margin: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .andknow_box {
            width: 287rpx;
            height: 76rpx;
            background: linear-gradient(177deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-size: 36rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            line-height: 76rpx;
            margin: auto;
            text-align: center;
        }
    }
}
</style>